<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <button type="button" class="btn btn-success" *ngIf="canVisit" (click)="goActivity()">新建活动</button>
    <!--<button type="button" class="btn btn-success" (click)="showAddModal()">新建活动</button>-->
  </div>
</div>

<div>
  <nz-spin [nzTip]="'正在读取活动列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>活动名称</th>
        <th>活动类型</th>
        <th>活动分类</th>
        <th>活动logo图</th>
        <th style="width:300px;">活动推荐语</th>
        <th>排序</th>
        <th>活动状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of activityList;">
        <td>{{item.id}}</td>
        <td style="width:200px;word-break:break-all;">{{item.activity_name}}</td>
        <td *ngIf="item.type == 1">新手商品集</td>
        <td *ngIf="item.type == 2">普通活动</td>
        <td *ngIf="item.type != 1 && item.type != 2"></td>
        <td>{{ item.category_name ? item.category_name : '全部' }}</td>
        <td *ngIf="item.pic">
          <img style="width:50px;height:50px;" src="{{ item.pic }}" alt="">
        </td>
        <td *ngIf="!item.pic">
          <span style="width:50px;height:50px;display: inline-block;">无logo图</span>
        </td>
        <td style="width:300px;word-break:break-all;">{{item.comment}}</td>
        <td>{{item.sort}}</td>
        <td *ngIf="item.status === 0"><span class="status-radio noauth-radio"></span>新增</td>
        <td *ngIf="item.status === 1"><span class="status-radio success-radio"></span>进行中</td>
        <td *ngIf="item.status === 2"><span class="status-radio error-radio"></span>暂停中</td>
        <td *ngIf="item.status === 3"><span class="status-radio noauth-radio"></span>结束</td>
        <td>{{item.created_at}}</td>
        <td>
          <ng-container *ngIf="canVisit3">
            <a href="javascript:;" *ngIf="item.status == 0 || item.status === 2"
               (click)="showConfirmModal(item.id,'开启',1)">开启</a>
            <a href="javascript:;" *ngIf="item.status === 1" (click)="showConfirmModal(item.id,'暂停',2)">暂停</a>
          </ng-container>
          <a href="javascript:;" *ngIf="canVisit1" (click)="goEdit(item.id)">编辑</a>
          <a href="javascript:;" *ngIf="canVisit2" (click)="showConfirmModal(item.id,'删除',3)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <ng-container *ngIf="totalItems">
      <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                  [(ngModel)]="currentPage"
                  [maxSize]="10"
                  previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                  [boundaryLinks]="true" class="pagination-sm"></pagination>
    </ng-container>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="promptIsShow($event)"></app-notification>


<div class="modal fade" bsModal #confirmModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">温馨提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeConfirmModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group clearfix">
          <p>您确定要{{ confirmTitle }}吗？</p>
        </div>
        <form>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="closeConfirmModal();">取消</button>
            <button class="btn btn-success btn-md-long" type="submit"
                    (click)=" confirmStatus != 3 ? changeStatus() : delete();">确定
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- 添加活动 -->
<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建活动</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addActivityForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-2">活动名称:</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="activity_name" [ngModelOptions]="{standalone: true}"
                     [(ngModel)]="addActivity.activity_name" name="activity_name" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">活动类型:</label>
            <div class="col-md-6">
              <select class="form-control" [(ngModel)]="addActivity.type" [ngModelOptions]="{standalone: true}">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">添加任务:</label>
            <div class="col-md-6">
              <button nz-button [nzType]="'primary'" (click)="addTask($event)">
                <span>{{ checkedTaskInfo.length === 0 ? '添加任务' : '编辑任务' }}</span>
              </button>
            </div>
          </div>
          <div class="form-group clearfix" *ngIf="checkedTaskInfo.length > 0">
            <label class="col-md-2">选中任务:</label>
            <div class="col-md-6">
              <p *ngFor="let task of checkedTaskInfo;let i = index;">{{ '任务名称: ' + task.task_name }}</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">活动图片</label>
            <div class="col-md-6">
              <app-upload [(fileList)]="fileList" [(piclist)]="picList"
                          (piclistChange)="fileChange()" (fileListChange)="fileChange()">
              </app-upload>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">活动排序</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="sort" [(ngModel)]="addActivity.sort" name="sort" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">活动推荐语</label>
            <div class="col-md-6">
<textarea type="text" class="form-control" id="comment" [(ngModel)]="addActivity.comment" name="comment"
          required></textarea>
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="addModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addActivityForm.form.valid"
                    (click)="addActivityFormSubmit($event)">提　交
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- 编辑活动 -->
<!--<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">-->
<!--<div class="modal-dialog modal-lg">-->
<!--<div class="modal-content">-->
<!--<div class="modal-header">-->
<!--<h4 class="modal-title pull-left">编辑活动</h4>-->
<!--<button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">-->
<!--<span aria-hidden="true">&times;</span>-->
<!--</button>-->
<!--</div>-->
<!--<div class="modal-body">-->
<!--<form #editActivityForm="ngForm">-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">活动名称</label>-->
<!--<div class="col-md-6">-->
<!--<input type="text" class="form-control" id="activity_name" [ngModelOptions]="{standalone: true}"-->
<!--[(ngModel)]="editActivity.activity_name" name="activity_name" required>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">活动类型</label>-->
<!--<div class="col-md-6">-->
<!--<select class="form-control" [(ngModel)]="editActivity.type" [ngModelOptions]="{standalone: true}">-->
<!--<option>0</option>-->
<!--<option>1</option>-->
<!--<option>2</option>-->
<!--<option>3</option>-->
<!--</select>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">添加任务</label>-->
<!--<div class="col-md-6">-->
<!--<button nz-button [nzType]="'primary'" (click)="addTask($event)">-->
<!--<span>{{ checkedTaskInfo.length === 0 ? '添加任务' : '编辑任务' }}</span>-->
<!--</button>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix" *ngIf="checkedTaskInfo.length > 0">-->
<!--<label class="col-md-2">选中任务</label>-->
<!--<div class="col-md-6">-->
<!--<p *ngFor="let task of checkedTaskInfo;let i = index;">{{ '任务名称: ' + task.task_name }}</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">活动图片</label>-->
<!--<div class="col-md-6">-->
<!--<app-upload [(fileList)]="fileList1" [(piclist)]="picList1"-->
<!--(piclistChange)="fileChange1()" (fileListChange)="fileChange1()">-->
<!--</app-upload>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">活动排序</label>-->
<!--<div class="col-md-6">-->
<!--<input type="text" class="form-control" id="sort" [(ngModel)]="editActivity.sort" name="sort" required>-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group clearfix">-->
<!--<label class="col-md-2">活动推荐语</label>-->
<!--<div class="col-md-6">-->
<!--<textarea type="text" class="form-control" id="comment" [(ngModel)]="editActivity.comment" name="comment"-->
<!--required></textarea>-->
<!--</div>-->
<!--</div>-->
<!--<div class="text-center mt20">-->
<!--<button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取消</button>-->
<!--<button class="btn btn-success btn-md-long" type="submit" [disabled]="!editActivityForm.form.valid"-->
<!--nz-button [nzLoading]="submitStatus"-->
<!--(click)="editActivityFormSubmit($event)">{{ submitStatus ? '提交中' : '提 交' }}-->
<!--</button>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->


<!-- 添加活动弹窗 -->
<nz-modal
  [nzVisible]="taskModalVisible"
  [nzTitle]="'添加任务'"
  [nzWidth]="'1200px'"
  [nzContent]="taskModalContent"
  [nzZIndex]="99999"
  [nzConfirmLoading]="isConfirmTaskLoading"
  (nzOnCancel)="closeTaskModal()"
  (nzOnOk)="closeTaskModal()"
>
  <ng-template #taskModalContent>
    <!--<div class="operate-line text-right">-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="merchant_id"-->
    <!--[nzPlaceHolder]="'输入商户ID'"></nz-input>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="task_name"-->
    <!--[nzPlaceHolder]="'输入任务名称'"></nz-input>-->
    <!--<nz-select style="width: 200px;" nzAllowClear [nzSize]="'large'" [nzPlaceHolder]="'请选择活动类型'" [(ngModel)]="selectedGroup" [nzShowSearch]="true">-->
    <!--<nz-option *ngFor="let type of typeList" [nzLabel]="type.label" [nzValue]="type.value">-->
    <!--</nz-option>-->
    <!--</nz-select>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="first_category"-->
    <!--[nzPlaceHolder]="'输入一级分类'"></nz-input>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="second_category"-->
    <!--[nzPlaceHolder]="'输入二级分类'"></nz-input>-->
    <!--<button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="search()">-->
    <!--<span>查 询</span>-->
    <!--</button>-->
    <!--<button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">-->
    <!--<span>重 置</span>-->
    <!--</button>-->
    <!--</div>-->

    <nz-table
      [nzAjaxData]="taskList"
      [nzLoading]="taskLoading"
      [(nzPageIndex)]="taskPage"
      [(nzPageSize)]="taskPageSize"
      [nzTotal]="taskTotal"
      (nzPageIndexChange)="getTaskList()"
    >
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox style="width:80px;"></th>
        <th nz-th style="width: 100px;">
          <span>任务名称</span>
        </th>
        <th nz-th>
          <span>任务图片</span>
        </th>
        <th nz-th>
          <span>任务积分</span>
        </th>
        <th nz-th>
          <span>任务状态</span>
        </th>
        <th nz-th>
          <span>创建时间</span>
        </th>
        <th nz-th>
          <span>结束时间</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-container *ngFor="let data of taskList;let i = index;">
        <tr nz-tbody-tr>
          <td nz-td nzCheckbox>
            <label nz-checkbox (ngModelChange)="dealTask($event,data)" [(ngModel)]="data.checked"></label>
          </td>
          <td nz-td>
            {{ data.task_name }}
          </td>
          <td nz-td>
            <img style="width:50px;height:50px;" [src]="data.taskPreview" alt="">
          </td>
          <td nz-td style="font-size: 12px;">
            {{ data.point }}
          </td>
          <td nz-td>
            <ng-container *ngIf="data.status === 0"><span class="ant-badge-status-dot ant-badge-status-success"></span>&nbsp;正常
            </ng-container>
            <ng-container *ngIf="data.status === 1"><span class="ant-badge-status-dot ant-badge-status-error"></span>&nbsp;暂停
            </ng-container>
          </td>
          <td nz-td>
            {{ data.validity_start }}
          </td>
          <td nz-td>
            {{ data.validity_end }}
          </td>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>


<!--添加活动弹窗-->
<!--<nz-modal-->
  <!--[nzVisible]="taskModalVisible"-->
  <!--[nzTitle]="'添加任务'"-->
  <!--[nzWidth]="'1200px'"-->
  <!--[nzContent]="taskModalContent"-->
  <!--[nzZIndex]="99999"-->
  <!--[nzConfirmLoading]="isConfirmTaskLoading"-->
  <!--(nzOnCancel)="closeTaskModal()"-->
  <!--(nzOnOk)="closeTaskModal()"-->
<!--&gt;-->
  <!--<ng-template #taskModalContent>-->
    <!--<nz-table-->
      <!--[nzAjaxData]="taskList"-->
      <!--[nzLoading]="taskLoading"-->
      <!--[(nzPageIndex)]="taskPage"-->
      <!--[(nzPageSize)]="taskPageSize"-->
      <!--[nzTotal]="taskTotal"-->
      <!--(nzPageIndexChange)="getTaskList()"-->
    <!--&gt;-->
      <!--<thead nz-thead>-->
      <!--<tr>-->
        <!--<th nz-th nzCheckbox style="width:80px;"></th>-->
        <!--<th nz-th style="width: 100px;">-->
          <!--<span>活动名称</span>-->
        <!--</th>-->
        <!--<th nz-th style="width:100px;">-->
          <!--<span>活动积分</span>-->
        <!--</th>-->
        <!--<th nz-th style="width:100px;">-->
          <!--<span>活动状态</span>-->
        <!--</th>-->
      <!--</tr>-->
      <!--</thead>-->
      <!--<tbody nz-tbody>-->
      <!--<ng-container *ngFor="let data of taskList;let i = index;">-->
        <!--<tr nz-tbody-tr>-->
          <!--<td nz-td nzCheckbox>-->
            <!--<label nz-checkbox (ngModelChange)="dealTask($event,data)" [(ngModel)]="data.checked"></label>-->
          <!--</td>-->
          <!--<td nz-td>-->
            <!--{{ data.task_name }}-->
          <!--</td>-->
          <!--<td nz-td style="font-size: 12px;">-->
            <!--{{ data.point }}-->
          <!--</td>-->
          <!--<td nz-td>-->
            <!--<ng-container *ngIf="data.status === 0"><span class="ant-badge-status-dot ant-badge-status-success"></span>&nbsp;正常-->
            <!--</ng-container>-->
            <!--<ng-container *ngIf="data.status === 1"><span class="ant-badge-status-dot ant-badge-status-error"></span>&nbsp;暂停-->
            <!--</ng-container>-->
          <!--</td>-->
        <!--</tr>-->
      <!--</ng-container>-->
      <!--</tbody>-->
    <!--</nz-table>-->
  <!--</ng-template>-->
<!--</nz-modal>-->

